<template>
  <template v-if="!!selectedWidget.options.areaDataEnabled">
    <el-form-item :label="i18nt('designer.setting.areaDataEnabled')">
      <el-switch v-model="optionModel.areaDataEnabled" disabled></el-switch>
    </el-form-item>
  </template>
  <template v-if="!!selectedWidget.optionItemsReadonly">
    <div style="display: none" />
  </template>
  <template v-else-if="!selectedWidget.options.areaDataEnabled">
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">{{ i18nt('designer.setting.optionsSetting') }}</el-divider>
    </el-form-item>
    <!--    标签名-->
    <el-form-item :label="i18nt('designer.setting.labelKeyName')">
      <el-tree-select filterable clearable v-model="optionModel.labelKey" :data="dataModelFields" :props="{
		    label: 'label',
		    value: 'key',
	    }" @clear="onClear('labelKey')">
        <template #default="{ node, data }">
          {{ data.label }}[{{ data.key }}]
        </template>
      </el-tree-select>
    </el-form-item>
    <el-form-item :label="i18nt('designer.setting.valueKeyName')">
      <!--      <el-input v-model="optionModel.valueKey"></el-input>-->
      <el-tree-select filterable clearable v-model="optionModel.valueKey" :data="dataModelFields" :props="{
		    label: 'label',
		    value: 'key',
	     }" @clear="onClear('valueKey')">
        <template #default="{ node, data }">
          {{ data.label }}[{{ data.key }}]
        </template>
      </el-tree-select>
    </el-form-item>
    <el-form-item v-if="hasConfig('childrenKey')" :label="i18nt('designer.setting.childrenKeyName')">
      <el-input v-model="optionModel.childrenKey"></el-input>
    </el-form-item>
    <!--    有parentKey代表是树形组件-->
    <el-form-item v-if="hasConfig('parentKey')" :label="'父节点属性'">
      <el-select filterable allow-create default-first-option v-model="optionModel.parentKey">
        <el-option v-for=" (field) in fieldModels" :key="field.key" :label="field.description" :value="field.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="hasConfig('dataKey')" :label="'父节点对应字段'">
      <el-select filterable allow-create default-first-option v-model="optionModel.dataKey">
        <el-option v-for=" (field) in fieldModels" :key="field.key" :label="field.description" :value="field.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="i18nt('designer.setting.dsEnabled')">
      <el-switch v-model="optionModel.dsEnabled"></el-switch>
    </el-form-item>
    <el-form-item v-if="!!optionModel.dsEnabled" :label="i18nt('designer.setting.dsName')">
      <el-select v-model="optionModel.dsName" filterable clearable @change="getDataSetList">
        <el-option v-for="(item, idx) in dataSourceList" :key="idx" :title="item.description" :label="item.uniqueName"
                   :value="item.uniqueName"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="!!optionModel.dsEnabled" :label="i18nt('designer.setting.dataSetName')">
      <el-select v-model="optionModel.dataSetName" filterable clearable>
        <el-option v-for="(item, idx) in dataSetList" :key="idx" :title="item.remark" :label="item.name"
                   :value="item.name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="!optionModel.dsEnabled && !optionModel.service?.enabled" label-width="0">
      <option-items-setting :designer="designer" :selected-widget="selectedWidget"></option-items-setting>
    </el-form-item>
  </template>
</template>

<script lang="ts">
import i18n from '@/utils/i18n'
import OptionItemsSetting from '@/components/form-designer/setting-panel/option-items-setting.vue'
import propertyMixin from '@/components/form-designer/setting-panel/property-editor/propertyMixin'
import { getDSByName, traverseTree } from '@/utils/util'
import { FormDesigner } from '@/types/form'

export default {
  name: 'optionItems-editor',
  mixins: [i18n, propertyMixin],
  props: {
    designer: Object as () => FormDesigner,
    selectedWidget: Object,
    optionModel: Object,
  },
  components: {
    OptionItemsSetting,
  },
  data() {
    return {
      dataSetList: [],
      serviceKey: [],
    }
  },
  computed: {
    dataSourceList() {
      if (!this.designer.formConfig || !this.designer.formConfig.dataSources) {
        return []
      } else {
        return this.designer.formConfig.dataSources
      }
    },
    dataModelFields() {
      if (this.optionModel.service?.id) {
        const svvo = this.designer.formConfig.serviceVersionVOs.find((svvo) => svvo.id == this.optionModel.service.id)
        // return svvo?.outputModelTree //此处是组件的数据源，所以选择输出模型
        console.log('dataModelFields', svvo)
        const fieldModels = []
        if (!svvo.outputModelTree) {
          return null
        }
        traverseTree(svvo.outputModelTree[0].children, (node) => {
          fieldModels.push({
            label: node.label,
            key: node.key,
          })
        })
        console.log(222, fieldModels)
        return fieldModels
      }
    },
  },
  methods: {
    loadDataSet(dsName) {
      this.dataSetList.length = 0
      if (!dsName) {
        return
      }

      let dsModel = getDSByName(this.designer.formConfig, dsName)
      if (!!dsModel && !!dsModel.dataSets) {
        dsModel.dataSets.forEach(dSet => {
          this.dataSetList.push({
            name: dSet.name,
            remark: dSet.remark,
          })
        })
      }
    },

    getDataSetList() {
      this.optionModel.dataSetName = ''
      this.loadDataSet(this.optionModel.dsName)
    },
    onClear(key) {
      if (key === 'valueKey') {
        this.optionModel.valueKey = 'value'
      } else if (key === 'labelKey') {
        this.optionModel.labelKey = 'label'
      }
    },
  },
}
</script>

<style scoped></style>
